<template>
  <div style="margin-top: 65px">
    <sunDrawerBack show="show_setPages" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="`【${currentItem.description}】`" @back="goBack" />
    <el-card class="sun-el-card" style="margin-bottom: 94px !important;">
      <el-form ref="refForm" class="sun-form-pages" :model="formData" :rules="formRules">
        <el-form-item
          label="设置为菜单："
          prop="menu"
        >
          <el-switch
            v-model="formData.menu"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item
          v-if="formData.menu"
          label="路由名称"
          prop="page_name"
        >
          <el-input v-model="formData.page_name" placeholder="请输入路由名称" />
        </el-form-item>
        <el-form-item
          v-if="formData.menu"
          label="字体图标"
          prop="icon"
        >
          <el-input v-model="formData.icon" placeholder="请输入字体图标" />
        </el-form-item>
        <el-form-item
          v-if="formData.menu"
          label="隐藏菜单："
          prop="hidden_menu"
        >
          <el-switch
            v-model="formData.hidden_menu"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        <el-form-item
          label="排序"
          prop="sort"
        >
          <el-input-number
            v-model="formData.sort"
            placeholder="请输排序"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <div class="sun-drawer-base-btn">
      <el-button size="mini" @click="goBack">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">提 交</el-button>
    </div>
  </div>
</template>

<script>
import { put } from '@/api/request'
import SunDrawerBack from '@/sun-components/SunDrawerBack'
export default {
  name: 'AdminSetPages',
  components: { SunDrawerBack },
  data() {
    return {
      searchList: [],
      tabList: [],
      formRules: {}
    }
  },
  computed: {
    formData() {
      return this.$parent.$parent.formData
    },
    currentItem() {
      return this.$parent.$parent.currentItem
    },
    show_setPages() {
      return this.$parent.$parent.show_setPages
    }
  },
  watch: {
    show_setPages: {
      handler: function(show) {
        if (show) {
          console.log('打开了', this.currentItem)
        }
      }
    }
  },
  created() {
    const _that = this
    if (_that.show_setPages) {
      console.log('打开了', this.currentItem)
    }
  },
  methods: {
    async submit() {
      console.log('提交', this.formData)
      await put(`permissions/${this.currentItem.id}`, this.formData).then(response => {
        if (response.code === 0) {
          this.goBack()
          this.$parent.$parent.upData()
        }
      })
    },
    async goBack() {
      this.$parent.$parent.show_setPages = false
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .sun-form-pages  ::v-deep {
    .el-switch__label{
      width: 35px !important;
      text-align: center !important;
    }
  }
</style>
